import { useCallback, useEffect, useRef, useState } from 'react'
import { Table } from 'antd'
import { initPageType, usePageChange } from '@hs-admin/utils'
import { postCompanyInfoDetailBidding } from '@/api/companyDetail/CompanyDevelopment.ts'
import { DetailModal } from '@hs-server/components'
import './Bidding.css'

const initPage: initPageType = {
  current: 1,
  pageSize: 10,
  total: 0,
  morePageOptions: {
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: number) => `共 ${total} 条数据`,
    pageSizeOptions: [10, 20, 30, 40]
  }
}

const Bidding = ({ companyCode }: { companyCode: string }) => {
  const [data, setData] = useState([])
  const [count, setCount] = useState('')

  const DetailModalRef = useRef<any>(null)

  const getList = useCallback(
    async (page: number, pageSize: number) => {
      const params = {
        companyCode: companyCode,
        current: page,
        pageSize
      }
      const res = await postCompanyInfoDetailBidding(params)
      setData(res.list ?? [])
      setCount(res.total ?? '')
      return res.total ?? 0
    },
    [companyCode]
  )

  const { pagination, resetPageAndTriggerRequest } = usePageChange(initPage, getList)
  useEffect(() => {
    resetPageAndTriggerRequest()
  }, [resetPageAndTriggerRequest])

  const columns = [
    {
      title: '序号',
      key: '序号',
      width: 80,
      render: (_, __, index) => index + 1 + (pagination.current - 1) * pagination.pageSize
    },
    {
      title: '发布日期',
      key: 'pubDate',
      dataIndex: 'pubDate',
      width: 120,
      render: (value) => value || '--'
    },
    {
      title: '标题',
      key: 'title',
      dataIndex: 'title',
      width: 220,
      render: (value, row) => (
        <>
          {value ? (
            <span
              style={{
                color: '#1072E0',
                cursor: 'pointer'
              }}
              onClick={() => {
                row.eventSubType = '招标详情'
                DetailModalRef.current.showModal(row)
              }}>
              {value}
            </span>
          ) : (
            '--'
          )}
        </>
      )
    },
    {
      title: '省份地区',
      key: 'province',
      dataIndex: 'province',
      render: (value) => value || '--'
    },
    {
      title: '招标类型',
      key: 'typeFirst',
      dataIndex: 'typeFirst',
      render: (value) => value || '--'
    },
    {
      title: '采购人',
      key: 'buyer',
      dataIndex: 'buyer',
      render: (value, row) => {
        if (value) {
          const findItem = row.orgInfoList.find((item) => Object.is(item.companyName, value))
          return (
            <span
              style={{
                color: findItem ? '#1072E0' : 'rgba(31, 34, 37, 1)',
                cursor: findItem ? 'pointer' : 'default'
              }}
              onClick={() => {
                if (findItem) {
                  window.open(`/companyDetail?companyCode=${findItem.companyCode}`, '_blank')
                }
              }}>
              {value}
            </span>
          )
        } else {
          return '--'
        }
      }
    },
    {
      title: '供应商',
      key: 'suppName',
      dataIndex: 'suppName',
      render: (value, row) => {
        if (value) {
          const findItem = row.orgInfoList.find((item) => Object.is(item.companyName, value))
          return (
            <span
              style={{
                color: findItem ? '#1072E0' : 'rgba(31, 34, 37, 1)',
                cursor: findItem ? 'pointer' : 'default'
              }}
              onClick={() => {
                if (findItem) {
                  window.open(`/companyDetail?companyCode=${findItem.companyCode}`, '_blank')
                }
              }}>
              {value}
            </span>
          )
        } else {
          return '--'
        }
      }
    },
    {
      title: '中标金额',
      key: 'offerAmt',
      dataIndex: 'offerAmt',
      render: (value) => (value ? value.toFixed(2) + '万元' : '--')
    }
  ]

  return (
    <>
      {data.length > 0 ? (
        <div id="招投标" className="bidding" data-count={count}>
          <div className="biddingTitle">招投标</div>
          <Table columns={columns} dataSource={data} pagination={pagination} rowKey={(row) => row.id} />
          <DetailModal ref={DetailModalRef} />
        </div>
      ) : null}
    </>
  )
}

export default Bidding
